<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="#{list.title}">我的疫情页面</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.css}">
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
</head>
<body>
    <h2 align="center" th:text="#{list.h2}">国内疫情数据如下</h2>
    <table class="table table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <th><span th:text="#{list.table.name1}">地区</span></th>
            <th><span th:text="#{list.table.name2}">现有</span></th>
            <th><span th:text="#{list.table.name3}">累计</span></th>
            <th><span th:text="#{list.table.name4}">治愈</span></th>
            <th><span th:text="#{list.table.name5}">死亡</span></th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="bean:${beanList}">
            <td th:text="${bean.area}">name</td>
            <td th:text="${bean.nowConfirm}">nowConfirm</td>
            <td th:text="${bean.confirm}">confirm</td>
            <td th:text="${bean.heal}">heal</td>
            <td th:text="${bean.dead}">dead</td>
        </tr>
        </tbody>
    </table>

    <!-- 为ECharts准备一个具备大小 (宽高) 的Dom -->
    <!--  折线图  -->
    <div id="main" style="width: 800px;height:600px;left: 520px;margin-top: 30px; "></div>
    <script th:inline="javascript">

        var dateStr = [[${dateList}]];
        var confirmStr = [[${confirmList}]];
        var suspectStr = [[${suspectList}]];

        //基于准备好的dom 初始化实例
        var mychart = echarts.init(document.getElementById("main"));
        var option = {
            //标题
            title: {
                text: '全国疫情新增趋势',
                subtext: '仅供参考',
                x: 'left'
            },
            //提示
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['新增确诊', '新增疑似']
            },
            //x轴的数据
            xAxis: {
                data: dateStr
            },
            //y轴的数据
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新增确诊',
                    type: 'line',
                    data: confirmStr
                },
                {
                    name: '新增疑似',
                    type: 'line',
                    data: suspectStr
                }
            ]
        };
        //将参数设置进去
        mychart.setOption(option);
    </script>

    <!-- 为ECharts准备一个具备大小 (宽高) 的Dom -->
    <!--  地图  -->
    <div id="main2" style="width: 1200px;height:800px;left: 300px;margin-top: 30px"></div>
    <script th:inline="javascript">

        //获取model渲染过来的数据
        var mapBean1 = [[${mapBean1}]];
        var mapBean2 = [[${mapBean2}]];

        //基于准备好的dom 初始化实例
        var mychart = echarts.init(document.getElementById("main2"));
        var option = {
            title: {
                text: '疫情地图',
                subtext: '仅供参考',
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['现有确诊', '累计确诊']
            },
            visualMap: {
                type: 'piecewise',
                pieces: [
                    {min: 10000, max: 1000000, label: '10000人及以上', color: '#de1f05'},
                    {min: 1000, max: 9999, label: '1000-9999人', color: '#ff2736'},
                    {min: 500, max: 999, label: '500-999人', color: '#ff6341'},
                    {min: 100, max: 499, label: '100-499人', color: '#ffa577'},
                    {min: 10, max: 99, label: '10-99人', color: '#ffcea0'},
                    {min: 1, max: 9, label: '1-9人', color: '#ffe7b2'},
                    {min: 0, max: 0, label: '0人', color: '#e2ebf4'},
                ],
                calculate: true
            },
            series: [
                {
                    name: '现有确诊',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            position: 'center',
                            show: true
                        }
                    },
                    data: JSON.parse(mapBean1)
                },
                {
                    name: '累计确诊',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            position: 'center',
                            show: true
                        }
                    },
                    data: JSON.parse(mapBean2)
                }
            ]
        };
        //将参数设置进去
        mychart.setOption(option);
    </script>
</body>
</html>